At Into The Box 2021, I presented CBWIRE v1.0 and was encouraged by the excitement and feedback from the community. I'm even more excited this year to tell you about CBWIRE 2.0 and all of the goodies we've added that you can start using right away.
Highlights
Documentation
For starters, the docs have received much love. There are entirely new sections, and the docs go into much greater detail now to help you get more from CBWIRE. Check those out at https://cbwire.ortusbooks.com.
Turbo Integration
https://cbwire.ortusbooks.com/v/v2-1/js-integrations/turbo-spas
CBWIRE now plays nicely with Turbo Drive ( formerly TurboLinks ), allowing you to transform your apps into single-page applications (SPAs) with just a few lines of code. You didn't read that wrong. With just a few lines of code!
File Uploads
https://cbwire.ortusbooks.com/v/v2-1/component-features/file-uploads
CBWIRE makes uploading and storing files extremely easy. Here's an example of a simple component that handles uploading a photo:
component extends="cbwire.models.Component" {
data = {
"photo": "",
"error": ""
};
function save() {
// 'photo' is now an instance of FileUpload@cbwire
if ( data.photo.getSize() > "100000" ) {
data.error = "Photo upload too big!";
} else {
// Store our file locally
fileWrite( expandPath( "./somewhere.jpg" ), data.photo.get() );
// Delete our file from CBWIRE's temporary storage and reset 'photo' data property
data.photo.destroy();
}
}
}
Dependency Injection
https://cbwire.ortusbooks.com/v/v2-1/component-features/dependency-injection
Your components now have WireBox available for injecting dependencies such as service objects, session storage, you name it!
Validation
https://cbwire.ortusbooks.com/v/v2-1/component-features/validation
You now have the full power of cbValidation built in for validating your data properties, making form validation a cinch.
JavaScript Lifecycle
https://cbwire.ortusbooks.com/v/v2-1/essentials/javascript-lifecycle
We've documented Livewire's JavaScript lifecycle, which provides several events that you can listen for and hook into as needed.
Testing
https://cbwire.ortusbooks.com/v/v2-1/essentials/testing
You can now test your components by extending our BaseWireTest class.
component extends="cbwire.models.BaseWireTest" {
function run(){
describe( "TaskList.cfc", function(){
it( "calling 'clearTasks' removes the tasks", function() {
wire( "TaskList" )
// Sets our data properties
.data( "tasks", [ "task1" ] )
// Verifies output in our template rendering
.see( "task 1 " )
// Runs the 'clearTasks' action
.call( "clearTasks" )
// Verifies updated template rendering
.dontSee( "task 1 " );
} );
} );
}
}
Query String
https://cbwire.ortusbooks.com/v/v2-1/component-features/query-string
You can now update the browser's query string when your component state changes and provide URLs for your components that populate the state.
Dirty State
https://cbwire.ortusbooks.com/v/v2-1/template-features/dirty-state
There are cases where it may be helpful to provide feedback that content has changed and is not yet in sync with the back-end. For input that uses wire:model, or wire:model.lazy, you can display that a field is 'dirty' until CBWIRE has fully updated.
Changelog
Enhancements
CBWIRE-19: Ability to set and manipulate query string URLs
CBWIRE-24: File Uploads
CBWIRE-55: Ability to write unit tests for components
CBWIRE-59: Ability to override the default 'wires' folder location
CBWIRE-60: noRender() method to prevent template rendering during actions
CBWIRE-61: Implement dirty property tracking
CBWIRE-65: Invoke computed properties during template rendering and only execute once per request
CBWIRE-70: Ability to specify a 'moduleRootURI' setting to change the URI path for cbwire
CBWIRE-71: Upgrade Livewire JS to v2.10.6
CBWIRE-81: Option to specify the component's template path using this.template instead of defining renderIt() method.
CBWIRE-82: Disable browser caching on XHR responses
CBWIRE-83: Reduce payload bloat by removing unnecessary data in XHR requests and responses
CBWIRE-84: Move internal methods to a separate Engine object to avoid collisions with user-defined methods
CBWIRE-85: Reject incoming XHR request if 'X-Livewire' HTTP Header is not present
CBWIRE-86: Specify null values for data properties
CBWIRE-87: Dependency injection capabilities to cbwire components
CBWIRE-90: Update to match Livewire's current incoming and outgoing HTTP responses
CBWIRE-91: Ability to use Turbo to create Single-page Applications ( SPAs )
Bugs
CBWIRE-73: Calling reset( "someProperty" ) throws error
CBWIRE-74: Browser back history doesn't work
CBWIRE-80: On subsequent renderings of components, it's changing the unique id and causing DOM diff issues
CBWIRE-88: Livewire expects params to be an array
CBWIRE-89: Not passing parameters when calling update methods
Add Your Comment